<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta th:include="~{layout/head_xadmin :: content}">
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="/admin">首页</a>
            <a href="#">权限管理</a>
            <a>
              <cite>授权访问管理</cite></a>
          </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()"
     title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body ">
          <div class="layui-form layui-col-space5">
            <div class="layui-inline layui-show-xs-block">
              <input type="text" id="search" placeholder="输入账号或者名称搜索" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-inline layui-show-xs-block">
              <button onclick="search()" class="layui-btn"><i class="layui-icon">&#xe615;</i></button>
            </div>
          </div>
        </div>

        <div class="layui-card-header">
          <button class="layui-btn" onclick="add()"><i class="layui-icon"></i>添加URL</button>
          <button class="layui-btn" onclick="xadmin.open('添加URL','./member-add.html',600,400)"><i
              class="layui-icon"></i>导出
          </button>
        </div>

        <table id="permission-table" lay-filter="userTable"></table>
        <script type="text/html" id="barTool">
          <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>

      </div>
    </div>
  </div>
</div>
</body>
<script>
  var table
  layui.use(['table', 'layer', 'jquery'], function () {
    table = layui.table;
    var layer = layui.layer;
    var $ = layui.jquery;

    table.render({
      elem: '#permission-table'
      // , height: 475
      , id: 'permissionTableId'
      , limit: 100
      , url: '/admin/permission/list' //数据接口
      , where: {"search": $('#search').val()}
      , page: true //开启分页
      , cols: [
        [ //表头
          {field: 'id', title: 'ID', width: 100, sort: true, fixed: 'left'}
          , {field: 'url', title: 'URL', width: 300, sort: true}
          , {
          field: 'method', title: 'GET/POST', width: 150, sort: true, templet: function (data) {
            if (data.method == 'GET') {
              return data.method;
            } else {
              return "<b style='color: red'>" + data.method + "</b>";
            }
          }
        }
          , {field: 'description', title: '描述', width: 400, sort: true}
          , {field: 'createTime', title: '创建时间', width: 200, sort: true}
          , {fixed: 'right', title: '操作', width: 250, align: 'center', toolbar: '#barTool'}
        ]
      ]
      , parseData: function (res) { //res 即为原始返回的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.total, //解析数据长度
          "data": res.data //解析数据列表
        };
      }
      , limits: [100, 200, 500]
    });

    //监听工具条
    table.on('tool(userTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      if (layEvent === 'edit') { //编辑
        layer.open({
          title: '编辑用户'
          , content: 'URL：<br>' +
              '<input type="text" id="url" value="' + data.url + '" autocomplete="off" class="layui-input" placeholder="需要授权的URL">' +
              '请求方法：<br>' +
              '<input type="text" id="method" value="' + data.method + '" placeholder="GET/POST" autocomplete="off" class="layui-input">' +
              'URL描述：<br>' +
              '<textarea id="description" placeholder="描述，100字以内" class="layui-textarea">' + data.description + '</textarea>'
          , yes: function (index, layero) {
            $.ajax({
              data: {'id': data.id, 'url': $('#url').val(), 'method': $('#method').val(), 'description': $('#description').val()},
              url: '/admin/permission/update',
              type: 'post',
              sync: false,
              success: function (data) {
                if (data.code == 0) {
                  reloadTable()
                  layer.msg(data.message)
                  layer.close(index)
                } else {
                  alert(data.message)
                }
              }
            })
          }
        });
      } else if (layEvent === 'del') {
        layer.confirm('确认要删除URL：' + data.url, {icon: 3, title: '提示'}, function (index) {
          $.ajax({
            data: {"id": data.id},
            url: '/admin/permission/delete',
            type: 'post',
            sync: false,
            success: function (data) {
              if (data.code == 0) {
                layer.close(index);
                reloadTable()
                window.setTimeout(function () {
                  layer.msg(data.message)
                }, 200)
              } else {
                alert(data.message)
              }
            }
          })
        });
      }
    });
  });

  function add() {
    layer.open({
      title: '添加URL'
      , area: ['400px', '400px']
      , content: 'URL：<br>' +
          '<input type="text" id="url" placeholder="需要授权的URL" autocomplete="off" class="layui-input">' +
          '请求方法：<br>' +
          '<input type="text" id="method" placeholder="GET/POST" autocomplete="off" class="layui-input">' +
          'URL描述：<br>' +
          '<textarea id="description" placeholder="描述，100字以内" class="layui-textarea"></textarea>'
      , yes: function (index, layero) {
        $.ajax({
          data: {'url': $('#url').val(), 'method': $('#method').val(), 'description': $('#description').val()},
          url: '/admin/permission/add',
          type: 'post',
          sync: false,
          success: function (data) {
            if (data.code == 0) {
              layer.close(index)
              window.setTimeout(function () {
                layer.msg(data.message)
                reloadTable()
              }, 100)
            } else {
              alert(data.message)
            }
          }
        })
      }
    });
  }

  function reloadTable() {
    table.reload('permissionTableId')
  }

  function search() {
    var search = $('#search').val()
    if (!search) {
      layer.msg('请输入要搜索的内容！')
      return;
    }
    reloadTable({
      url: '/admin/permission/list'
      , where: {"search": search}
    })
  }
</script>
</html>
